<template>
  <el-dialog :title="title" :visible.sync="formInfoObj.visible" :close-on-click-modal="false" width="30%">
      <el-form :model="formInfoObj" :rules="rulesRef" ref="ruleFormsRef">
        <el-form-item label="话题图片">
           <VabQiniuUpload :limit="1" ref="cerateUpload" @onOk="urlOK"></VabQiniuUpload>
        </el-form-item>
        <el-form-item label="话题名称" prop="name">
          <el-input v-model="formInfoObj.name"></el-input>
        </el-form-item>
        <el-form-item label="匹配学校" prop="schoolId">
          <el-select v-model="formInfoObj.schoolId" style="width:100%" placeholder="请选择">
            <el-option
             v-for="item in schoolData"
            :disabled="item.status != 2"
            :key="item.schoolId"
            :label="item.schoolName"
            :value="item.schoolId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="话题描述">
          <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 10}"
          placeholder="请输入话题描述"
          show-word-limit
          maxlength="50"
          v-model="formInfoObj.desc">
        </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formInfoObj.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitform(ruleFormsRef)">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import store from '@/store'
import VabQiniuUpload from '@/components/VabQiniuUpload'
import {
  setTopicAdd,setTopicEdit
} from '@/api/topic/topic_api'
export default {
  name: 'topicForm',
    components: {
      VabQiniuUpload
    },
  setup(props, { emit }) {
   // const emits = defineEmits(['onOk']) imgName
    const Interface = reactive({
      openForm(row){
        query.formInfoObj.visible = true
        let schoolData = store.getters['baseStore/schoolData']
        query.schoolData = schoolData.concat(query.other)
        query.file = ''
        if(row == true){
          query.title ='新增话题'
          query.formInfoObj.imgUrl = ''
          query.formInfoObj.name = ''
          query.formInfoObj.schoolId = ''
          query.formInfoObj.desc = ''
          query.formInfoObj.id = ''
          nextTick(()=>{
            cerateUpload.value.loadImg()
          })
        }else{
          query.title ='编辑话题'
          query.formInfoObj.imgUrl = row.imgUrl
          query.formInfoObj.name = row.name
          query.formInfoObj.schoolId = row.schoolId
          query.formInfoObj.desc = row.desc
          query.formInfoObj.id = row.id
          nextTick(()=>{
            cerateUpload.value.loadImg(row)
          })
        }
      },
     urlOK(file){
      query.file = file
     },
     async submitform(formEl){
        if (!formEl) return;
        await formEl.validate(async(valid, fields) => {
          if (valid) {
            if(query.file){
              const fileUrl = await store.dispatch('baseStore/setQiniuUpdate',query.file)
              query.formInfoObj.imgUrl = fileUrl
            }
            const {code} = query.formInfoObj.id ? await setTopicEdit(query.formInfoObj):await setTopicAdd(query.formInfoObj)
            if(code === 0){
              Message.success('操作成功')
              query.formInfoObj.visible = false
              emit('onOk')
            }
          }
        })
      }
    })
    const ruleFormsRef = ref(null)
    const cerateUpload = ref(null)
    const query = reactive({
      other:[{schoolId:0,schoolName:'全学校通用',status:''}],
      file:'',
      title:'',
      schoolData:[],//computed(() => store.getters['baseStore/schoolData']),
      rulesRef:{
        name:[{ required: true, message: "请输入话题标题", trigger: "blur" }],
        imgUrl:[{ required: true, message: "请上传话题封面", trigger: "blur" }],
        schoolId:[{ required: true, message: "请选择学校", trigger: "change" }]
      },
      formInfoObj:{
        name:'',
        imgUrl:'',
        schoolId:'',
        desc:'',
        visible:false,
        id:'',
      }
    })
    return {
      ruleFormsRef,
      cerateUpload,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
}
</script>